<template>
    <div>
        <div v-if="value" class="thumbnail">
            <el-image :src="value" :preview-src-list="[value]" />
        </div>
        <div @click="openDialog" style="display:inline-block">
            <slot name="button" />
        </div>
        <div class="clearbtn" title="清空选中值" v-if="value"><i class="el-icon-error" @click="clearSelect"></i></div>
        <el-dialog title="图片资源" :visible.sync="dialogVisible" :close-on-click-modal="false" width="700px" append-to-body>
            <div style="margin-top:-20px;">
                <div style="width:200px;display:inline-block;">
                    <el-input v-model="listQuery.name" placeholder="关键字搜索" @keyup.enter.native="getList" clearable
                        @clear="getList">
                        <i slot="suffix" class="el-input__icon el-icon-search" @click="getList"></i>
                    </el-input>
                </div>
                <el-upload :action="uploadUrl" :before-upload="uploadBefore" :on-error="uploadError"
                    :on-success="uploadHandleChange" :show-file-list="false" :accept="uploadType"
                    :data="{ CustomerId: $store.getters.firmId }" style="display:inline-block;margin-left:10px;">
                    <el-button>上传图片</el-button>
                </el-upload>
            </div>
            <div class="imgdata">
                <div v-for="item in list" :key="item.id" class="imglist" :title="item.name"
                    :class="{ 'active': item.url == value }" @click="pickValueHandle(item)">
                    <div class="imgview">
                        <img :src="item.url" class="ziyuanimg" />
                    </div>
                    <p>{{ item.name }}</p>
                </div>
            </div>
            <div style="text-align:right;">
                <Pagination :total="total" :page.sync="listQuery.pageInfo.page" :pageCount="5"
                    :limit.sync="listQuery.pageInfo.pageSize" @pagination="getList"></Pagination>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// import { query, deleteInfo, create, rechristen, copyResource } from '@/api/resource'
import Pagination from '@/components/Pagination';
export default {
    name: "ImgStore",
    components: {
        Pagination
    },
    props: {
        value: String,
    },
    data() {
        return {
            uploadUrl: process.env.VUE_APP_UPLOAD_NEWAPI,
            total: 0,
            list: [],
            dialogVisible: false,
            listQuery: {
                pageInfo: {
                    pageSize: 10,
                    page: 1,
                    totalCount: 0
                },
                orderBy: "createTime",
                orderAsc: false,
                name: "",
                typeInc: [0]
            },
            uploadType: ".jpg, .png, .gif",
            dataform: {
                id: "",
                name: "",
                type: 0,
                url: ""
            },
        }
    },
    // model: {
    //     prop: 'value',
    //     event: 'change'
    // },
    methods: {
        openDialog() {
            this.dialogVisible = true;

            this.getList();
        },
        getList() {
            // this.$loading();
            query(this.listQuery)
                .then((response) => {
                    this.list = response.data.data.data;
                    this.$loading().close();
                    this.total = response.data.data.pageInfo.totalCount;
                })
                .catch(() => {
                    this.$loading().close();
                });
        },
        createData() {
            this.$loading();
            const tempDataForm = Object.assign({}, this.dataform);
            create(tempDataForm)
                .then((res) => {
                    this.$loading().close();
                    if (res.data.code == 0) {
                        this.notifyMessage();
                        this.getList();
                        this.$message({
                            message: "上传成功",
                            type: "success",
                        });
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
                .catch(() => {
                    this.$loading().close();
                });
        },
        pickValueHandle(item) {
            this.$emit('input', item.url);
            this.value = item.url;

            this.dialogVisible = false;
        },
        clearSelect() {
            this.$emit('input', "");
            this.value = "";
        },
        // #region 本地资源上传服务
        uploadBefore(file) {
            if (file.size > 1000 * 1000 * 30) {
                this.$message.error("上传图片不能大于30M");
                return false;
            }
            this.$loading();
        },

        uploadError() {
            this.$loading().close();
        },

        uploadHandleChange(res, file, fileList) {
            if (res.code == 0) {
                this.dataform.id = "";
                this.dataform.name = file.name;
                this.dataform.type = 0;
                this.dataform.url = res.data;

                this.createData();
            } else {
                this.$loading().close();
                this.$message.error(res.message);
            }
        },
        // #endregion 
    }
}
</script>

<style scoped>
.imgdata {
    display: flex;
    flex-flow: wrap;
    padding-top: 10px;
    min-height: 324px;
}

.imglist {
    padding: 5px;
    width: 120px;
    border: solid 1px #e2e2e2;
    text-align: center;
    margin: 5px 10px 5px 0;
    cursor: pointer;
    height: 147px;
}

.imglist:hover,
.imglist.active {
    border-color: #409EFF;
    box-shadow: 0px 0px 3px 1px #74b7fd;
}

.imglist .imgview {
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.imglist img {
    width: 100%;
    height: min-content;
}

.imglist p {
    padding-top: 5px;
    line-height: 20px;
    height: 25px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
}

.clearbtn {
    display: inline-block;
    vertical-align: middle;
}

.clearbtn .el-icon-error {
    margin-left: 5px;
}</style>